<template>
  <div class="dashboard-container">
    <color-count-card :dataList="dataList" @search="setSearch"/>
    <div class="content" v-if="twoArrCludes(['SITE_MANAGER'])">
      <div>
        <div class="title blue">
          <p>{{$t('dashboard.weekRegister')}}</p>
          <p>{{weekTotal}}</p>
        </div>
        <ul>
          <li class="subTitle">
            <p><i class="iconfont icon-zhiweiguanli blue"></i>{{$t('common.name')}}</p>
            <p><i class="iconfont icon-letter blue"></i><span>{{$t('common.email')}}</span></p>
            <p><i class="iconfont icon-phone blue"></i><span>{{$t('common.mobile')}}</span></p>
          </li>
          <li v-for="item in weekList" :key="item.id">
            <p><span class="img"><img :src="item.photo || image64.noAvatar" alt="" /></span><span>{{item.name || item.id}}</span></p>
            <p>{{item.email}}</p>
            <p>{{item.mobile}}</p>
          </li>
        </ul>
        <p class="blue" @click="searchAll('lastWeek')" v-if="twoArrCludes(['SITE_MANAGER'])">{{$t('dashboard.allRegister')}}</p>
      </div>
      <div>
        <div class="title green">
          <p>{{$t('dashboard.lineTotal')}}</p>
          <p>{{lineTotal}}</p>
        </div>
        <ul>
          <li class="subTitle">
            <p><i class="iconfont icon-zhiweiguanli green"></i>{{$t('common.name')}}</p>
            <p><i class="iconfont icon-toudijianli green"></i><span>{{$t('dashboard.deliveryCount')}}</span></p>
            <p><i class="iconfont icon-chakan green"></i><span>{{$t('dashboard.reviewCount')}}</span></p>
          </li>
          <li v-for="item in lineList" :key="item.id">
            <p><span class="img"><img :src="item.photo || image64.noAvatar" alt="" /></span><span>{{item.name || item.id}}</span></p>
            <p>{{item.deliveryCount}}</p>
            <p>{{item.reviewCount}}</p>
          </li>
        </ul>
        <p class="green" @click="searchAll('onLine')" v-if="twoArrCludes(['SITE_MANAGER'])">{{$t('dashboard.allIineTotal')}}</p>
      </div>
    </div>
    <div class="content" v-else>
      <div>
        <div class="title blue">
          <p>{{$t('dashboard.companyApplyCount')}}</p>
          <p>{{allApplyTotal}}</p>
        </div>
        <ul>
          <li class="subTitle">
            <p><i class="iconfont icon-zhiweiguanli blue"></i>{{$t('common.name')}}</p>
            <p><i class="iconfont icon-letter blue"></i><span>{{$t('common.email')}}</span></p>
            <p><i class="iconfont icon-phone blue"></i><span>{{$t('common.mobile')}}</span></p>
          </li>
          <li v-for="item in allApply" :key="item.id">
            <p><span class="img"><img :src="item.photo || image64.noAvatar" alt="" /></span><span>{{item.name || item.id}}</span></p>
            <p>{{item.email}}</p>
            <p>{{item.mobile}}</p>
          </li>
        </ul>
        <p class="blue" @click="searchAllApply('all')">{{$t('dashboard.allApply')}}</p>
      </div>
      <div>
        <div class="title green">
          <p>{{$t('dashboard.weekApply')}}</p>
          <p>{{weekApplyTotal}}</p>
        </div>
        <ul>
          <li class="subTitle">
            <p><i class="iconfont icon-zhiweiguanli green"></i>{{$t('common.name')}}</p>
            <p><i class="iconfont icon-toudijianli green"></i><span>{{$t('dashboard.deliveryCount')}}</span></p>
            <p><i class="iconfont icon-chakan green"></i><span>{{$t('dashboard.reviewCount')}}</span></p>
          </li>
          <li v-for="item in weekApply" :key="item.id">
            <p><span class="img"><img :src="item.photo || image64.noAvatar" alt="" /></span><span>{{item.name || item.id}}</span></p>
            <p>{{item.deliveryCount}}</p>
            <p>{{item.reviewCount}}</p>
          </li>
        </ul>
        <p class="green" @click="searchAllApply('week')">{{$t('dashboard.allWeekApply')}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import image64 from '@/assets/image-64.js'
import { candidateListByWeek, candidateListOnLine } from '@/api/dashboard'
import { positionStatusCount } from '@/api/position'
import { applicationList } from '@/api/resume'
import { mapState } from 'vuex'
import ColorCountCard from '@/components/dashboard/ColorCountCard'
import { twoArrCludes } from '@/util/roles'
export default {
  name: 'dashboard',
  components: { ColorCountCard },
  data () {
    return {
      image64,
      dataList: [
        { name: 'dashboard.allPosition', key: 'ALL', value: '0', css: 'blue' },
        { name: 'dashboard.publishedPosition', key: 'PUBLISHING', value: '0', css: 'green' },
        { name: 'dashboard.revokedPosition', key: 'REVOKED', value: '0', css: 'grey' },
        { name: 'dashboard.waitPosition', key: 'WAITAUDIT', value: '0', css: 'red' }
      ],
      weekList: [],
      weekTotal: 0,
      lineList: [],
      lineTotal: 0,
      allApply: [],
      allApplyTotal: 0,
      weekApply: [],
      weekApplyTotal: 0
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  created () {
    this.initData()
  },
  methods: {
    twoArrCludes,
    async getApplicationList () {
      let params = {
        max: 10,
        offset: 0
      }
      let res = await applicationList(params)
      if (res.code === 200) {
        this.allApply = res.data.items
        this.allApplyTotal = res.data.totalCount
      } else {
        this.$message.error(res.message)
      }
      this.loading = false
    },
    async getApplicationList2 () {
      let params = {
        operator: 'Delivered',
        deliverDate: '1W',
        max: 10,
        offset: 0
      }
      let res = await applicationList(params)
      if (res.code === 200) {
        this.weekApply = res.data.items
        this.weekApplyTotal = res.data.totalCount
      } else {
        this.$message.error(res.message)
      }
      this.loading = false
    },
    setSearch (item) {
      this.$router.push(`/position/positionManagement?status=${item.key}`)
    },
    searchAllApply (type) {
      this.$router.push(`/resume/candidateApplication${type === 'week' ? '?operator=Delivered&deliverDate=1W' : ''}`)
    },
    searchAll (type) {
      this.$router.push(`/registeredAccount/registeredAccountList?${type}=true`)
    },
    initData () {
      this.positionCount()
      if (twoArrCludes(['SITE_MANAGER'])) {
        this.candidateList()
        this.candidateOnLine()
      } else {
        this.getApplicationList()
        this.getApplicationList2()
      }
    },
    async positionCount () {
      let res = await positionStatusCount()
      if (res.code === 200) {
        this.dataList.forEach(item => {
          res.data.some(value => {
            if (item.key === value.key) {
              item.value = value.value
              return true
            }
          })
        })
      } else {
        this.$message.error(res.message)
      }
    },
    async candidateList () {
      let res = await candidateListByWeek()
      if (res.code === 200) {
        this.weekList = res.candidateList.slice(0, 10)
        this.weekTotal = res.totalCount
      } else {
        this.$message.error(res.message)
      }
    },
    async candidateOnLine () {
      let res = await candidateListOnLine()
      if (res.code === 200) {
        this.lineList = res.candidateList.slice(0, 10)
        this.lineTotal = res.totalCount
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../styles/var.styl'
.dashboard-container
  padding 12px 24px
  .content
    margin-top 12px
    display flex
    justify-content space-between
    align-items stretch
    >div
      border-radius borderRadius
      flex 1
      display flex
      flex-direction column
      margin-right 24px
      background #fff
      &:last-child
        margin-right 0
      .title
        padding 24px 24px 12px
        // font Arial Black, Gadget, sans-serif，font-size: 48px, 72px
        &.green
          border-bottom 4px solid darkGreen
          p
            color darkGreen
        &.blue
          border-bottom 4px solid var(--blue-500)
          p
            color var(--blue-500)
        p
          font-weight bold
          &:last-child
            font-family Arial Black, Gadget, sans-serif
            font-size 72px
      li
        display flex
        border-bottom 1px solid borderColor
        &.subTitle
          background cccGrey
          border none
          p
            color #555
            padding 5px 16px
            &:first-child
              .iconfont
                margin-left 2px
                margin-right 13px
            span
            .iconfont
              margin-right 8px
              vertical-align middle
            .iconfont
              font-size 24px
              &.blue
                color var(--blue-500)
              &.green
                color darkGreen
        p
          flex 1
          padding 8px 16px
          >span
            vertical-align top
            &.img
              width 32px
              height 32px
              display inline-block
              border 1px solid borderColor
              border-radius borderRadius
              margin-right 6px
              overflow hidden
              img
                width 100%
                height 100%
            &.show
              visibility hidden
      >p
        cursor pointer
        padding 12px 24px
        text-align right
        text-decoration underline
        margin-top auto
        &.blue
          color var(--blue-500)
        &.green
          color darkGreen
</style>
